/*
* @Author: Yejing
* @Date: 2023-05-29 18:19:38
* @LastEditors: WangXi
* @LastEditTime: 2023-07-05 15:08:15
* @Description: 主播首页
*/
<template>
	<view class="anchor-homepage">
		<c-layout>
			<!-- 头部 -->
			<c-navigation-bar slot="head" navbar-bg-color="#1B1D29" :isSearch="false" :isRightIcon="true"
				left-icon-border="#E1E8E8" left-icon-color="#fff">
				<template slot="rightIcon">
					<!-- <bubble ref="bubble" :data="bubble2.data " @bubbleLineClick='bubbleLineClick'></bubble> -->
				</template>
			</c-navigation-bar>

			<!--内容-->
			<view class="container-box">
				<view class="head-suspension">
					<u-avatar :src="$u.file.getMedieUrl(userInfo.avatar)" mode="square" size="200" :show-level='true'
						:level-icon='cameraFill' level-bg-color='#fff'>
					</u-avatar>
					<text class="name">{{ userInfo.nickName }}</text>
					<text class="ID"  style=" overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 width:550rpx;margin: 0 20rpx;margin: 0 auto;">{{ userInfo.personalIntroduction?userInfo.personalIntroduction:$t('user.individualResume') }}</text>
					<text class="ID">ID:{{ userInfo.newUserRandomId}}

					</text>
					<view class="">
						<u-button v-if="!concerns" hover-class="none" type="primary"
							@click="attention('/app/user/concern/',$t('classifySeckill.Followed'))">{{$t('classifySeckill.Follow')}}
						</u-button>
						<u-button v-else type="primary" style="background-color: #fc3d5c;"
							@click="attention('/app/user/concern/',$t('classifySeckill.unfollowed'))">{{$t('classifySeckill.Followed')}}
						</u-button>

					</view>
					<view class="" v-if='userInfo.shopId' style="display: flex;justify-content: center;align-items: center;margin: 20rpx 0;">
						<view class="">
							{{$t('storeManagement.ShopName')}}:
						</view>
						<view class="" style=" overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 width: 120rpx;margin: 0 20rpx;">
							{{shopName}}
						</view>
						<u-button type="primary" style="margin: 0;height: 30px;" 
							@click="shopItemClick()">{{$t('storeManagement.enterShop')}}
						</u-button>
					</view>


				
					<view class="data">
						<view class="num">
							<text>{{ Number(userInfo.concern)>=10000?(Number(userInfo.concern)/10000).toFixed(2)+'w':Number(userInfo.concern)>=1000?(Number(userInfo.concern)/1000).toFixed(2)+'k': Number(userInfo.concern)}}</text>
							<text>{{$t('storeOfInterest.concern')}}</text>
						</view>
						<view class="num">
						<text>{{ Number(userInfo.fans)>=10000?(Number(userInfo.fans)/10000).toFixed(2)+'w':Number(userInfo.fans)>=1000?(Number(userInfo.fans)/1000).toFixed(2)+'k': Number(userInfo.fans)}}</text>
							<text>{{$t('storeOfInterest.fans')}}</text>
						</view>
						<view class="num">
							<text>{{ Number(userInfo.like)>=10000?(Number(userInfo.like)/10000).toFixed(2)+'w':Number(userInfo.like)>=1000?(Number(userInfo.like)/1000).toFixed(2)+'k': Number(userInfo.like)}}</text>
							<text>{{$t('storeOfInterest.like')}}</text>
						</view>
					</view>

					<!-- 分类 -->
					<view class="container-tabs">


						<view class="tabs">
							<!-- 分类区 -->
							<view class="tabs-info">

								<!--作品-->


								<!-- 商铺信息 -->

								<!-- 视频 -->

								<view>
									<view class="video-box" v-if="concernsList.video.list.length>0">
										<template v-for="(item,index) in concernsList.video.list">
											<!-- {{item}} -->

											<videoCard @videoInfo="videoClick(item,index)" :key="item.id"
												:details="{...item,img:$u.appImage.getOssVideoCover(item.url)}"></videoCard>
										</template>
									</view>
									<view class="empty" v-else>
										<image style="height:140rpx;" src="@/static/svg/wjj.svg" />
										<text>{{ empty.title }}</text>
									</view>

								</view>
								<!-- 空 -->

							</view>
						</view>
					</view>
				</view>
			</view>
		</c-layout>





		<c-share v-model="sharePopShow" :data="shareData"></c-share>
	</view>
</template>

<script>
	import bubble from "@/pages/searchInfo/components/bubble.vue"
	import lineProductCard from "@/pages/searchInfo/components/productCard.vue"

	export default {
		components: {
			bubble,
			lineProductCard
		},
		data() {
			return {
				cameraFill: require('static/images/icon-avator-home.png'),
				imgGroup: [require('static/images/login/ins.png'), require('static/images/login/facebook.png'), require(
					'static/images/login/tiktok.png'), require('static/images/login/YouTube.png')],
				//搜索
				search: {
					navThmen: 'line',
					navPlaceholder: 'Donate for',
					navType: 'navBackTitle'
				},
				shopName: '',
				tabsType: [{
					name: this.$t('storeOfInterest.shops')
				}, {
					name: this.$t('storeOfInterest.works')
				}],
				current: 0,
				activeItem: {
					'background': '#2934D0',
					'color': '#fff !important',

				},
				userInfo: {},
				shopsList: [{
					name: this.$t('storeOfInterest.shops')
				}, {
					name: this.$t('storeOfInterest.works')
				}],



				shops: {
					swiperList: [],
					titleStyle: {
						'background': '#2934D0'
					},
					bestList: [],
				},
				video: {
					show: false,
					id: '',
					url: '',
				},
				// 关注列表
				concernsList: {

					// 商店关注列表
					store: {
						isGet: false,
						list: []
					},
					// 短视频关注列表
					video: {
						isGet: false,
						list: []
					}
				},
				// 查询数据
				queryData: {

					store: {

					},
					user: {
						"pageSize": 999,
						"pageNum": 1,
						"startTime": "",
						"endTime": "",
						"id": "",
						"name": ""
					},
					video: {
						"pageSize": 10000,
						"pageNum": 1,
						"id": "",
					},
				},

				collectionData: [],
				bubble2: {
					data: [{
						text: this.$t('system.ShareCode'),
						icon: 'grid',
						url: '/pages/invitation/invitation',
					}]
				},
				sharePopShow: false,
				concerns: false,
				friendList: [],
				sendSvg: require('@/static/images/send.svg'),
				pagingObj: {
					pageSize: 20,
					pageNum: 1
				},
				paging: {
					current: 1,
					size: 10
				},
				empty: {
					show: false,
					img: '',
					title: this.$t('system.NoRecord'),
					hint: '',
					buttonText: ''
				},
				total: 0

			}

		},
		computed: {
			screenHeight() {
				return this.$store.getters.homePageWindowInfo.screenHeight
			},
			// 分享数据
			shareData() {
				console.log(this.vuex_anchor_info, 5648651);
				return {
					// this.userInfo.id
					id: '',
					name: `anchorHome`,
					url: `/pages/searchInfo/components/anchorCard/anchorHomepage?type=outSide&userId=${this.vuex_anchor_info.userId||''}`,
					p: {
						'type': 'outSide',
						"userId": this.vuex_anchor_info.userId
					}
				}
			}
		},
		onLoad(data) {
			this.queryData.video.id = data.userId
			this.$u.post('/app/user/concern/page/followUser', this.queryData.user).then(res => {
				this.concerns = false
				res.data.records.forEach(i => {
					if (i.userId == data.userId) {
						this.concerns = true
					}
				})
			})
			this.$u.get(`/app/user/info?userId=` + data.userId).then((d) => {
				this.userInfo = d.data;
				this.cameraFill = this.$u.file.getMedieUrl(d.data.userLevelIcon)
				if (d.data.shopId) {
					this.$u.get('/app/shop/get/' + d.data.shopId).then(res => {
						this.shopName = res.data.shopName

					})
				}

			});

			this.queryVideoConcernsListAjax()
		},
		mounted() {

		},
		methods: {


			//点击更右上角更多图标
			bubbleLineClick(item, index) {
				if (item.url) {
					if (item.url) {
						console.log(item.url);
						this.$u.route({
							url: item.url,
							params: item.data
						})
					}
				}
				console.log(666, 99, item);
				if (item.icon == 'share') {
					this.sharePopShow = true
				}
			},

			// 我的作品
			queryVideoConcernsListAjax(isUpdate) {

				this.$u.post('app/short/video/recommendedList', this.queryData.video).then(res => {
					this.concernsList.video.list = res.data.records
				})
			},
			shopItemClick() {
				this.$u.route('/pages/shop/index', { shopId: this.userInfo.shopId })

			},
			// 短视频点击
			videoClick(item, index) {
				this.$u.vuex('vuex_video_record', {
					list: this.concernsList.video.list,
					index: index,
					show: true
				})
				uni.navigateTo({
					url: "/pages/public/recordVideo/recordVideo",
					"animationType": "slide-in-right",
					"animationDuration": 300
				})
			},
			//关注
			attention(url, text, status) {
				this.$u.post(url + this.userInfo.id).then(res => {
					this.$u.toast(text)
					this.$u.post('/app/user/concern/page/followUser', this.queryData.user).then(res => {
						this.concerns = false
						res.data.records.forEach(i => {
							if (i.userId == this.userInfo.id) {
								this.concerns = true
							}
						})
					})
				})
			},
		},

		//离开页面关闭气泡
		// onHide(type) {
		//     this.$refs.bubble.moreClick()
		// }
	}
</script>

<style lang="scss" scoped>
	.anchor-homepage {
		background-color: #1B1D29;
		position: relative;
		width: 100vw;
		min-height: 100vh;


		.container-box {
			padding-top: 160rpx;
			position: relative;
			min-height: 100%;
			display: flex;
			flex-direction: column;

			.head-suspension {
				flex: 1;
				display: flex;
				flex-direction: column;
				background-color: #fff;
				width: 100%;
				border-radius: 60rpx 60rpx 0rpx 0rpx;
				padding: 150rpx 40rpx 0 40rpx;
				position: relative;

				.u-avatar {
					position: absolute;
					top: -95rpx;
					left: 50%;
					transform: translateX(-50%);

					/deep/ .u-avatar__img {
						border-radius: 40rpx !important;
					}

					/deep/ .u-avatar__level {
						right: 15rpx !important;
						bottom: 20rpx !important;
					}

					/deep/ .u-iconfont {
						font-size: 50rpx !important;
						right: 0;
						color: #35E8F7;
					}
				}

				.name {
					display: block;
					color: #02010E;
					font-size: 48rpx;
					text-align: center;
				}

				.ID {
					display: block;
					text-align: center;
					color: #91909A;
					font-size: 32rpx;
					margin: 10rpx 0 0 0;
				}

				.data {
					display: flex;
					justify-content: space-between;

					.num {
						width: 30%;

						uni-text {
							color: #02010E;
							font-size: 40rpx;
							display: block;
							text-align: center;

							&:nth-child(2) {
								margin-top: 10rpx;
								color: #91909A;
								font-size: 28rpx;
							}
						}
					}
				}

				.container-tabs {
					margin-top: 66rpx;
					flex: 1;
					display: flex;
					flex-direction: column;

					.tabs-info {
						margin-top: 66rpx;

						/deep/ .u-scroll-box {
							.u-line-1 {
								line-height: 48rpx !important;
								width: auto !important;
								height: 48rpx !important;
								background-color: transparent;
								color: #C9C9C9 !important;
								border-radius: 20rpx;
								margin-right: 0rpx;
								font-size: 32rpx !important;
								padding-bottom: 60rpx !important;
								position: relative;
								padding: 0 !important;
								margin-right: 56rpx;
								margin-bottom: 10rpx;
							}
						}

						.works {
							flex-wrap: wrap;

							.item {}
						}
					}


					.shops-info {
						padding: 20rpx 0 0rpx 0;
						position: relative;
						flex: 1;

						.title {
							font-size: 32rpx;
							color: #3B3B3B;
							position: absolute;
							top: 30rpx;
						}

						/deep/ .swiper {
							height: 570rpx !important;
							background: #FFFFFF;
							border-radius: 32rpx;
							padding-top: 80rpx;

							.uni-swiper-wrapper {
								overflow: inherit;
							}

							uni-swiper-item {
								width: 486rpx !important;
								padding-right: 20px;
								height: 500rpx !important;

								uni-image {
									margin-right: 20px;
									width: 486rpx;
									border-radius: 32rpx !important;
								}

								.shops-msg {
									border-radius: 32rpx !important;
									display: flex;
									font-size: 12px;
									align-items: flex-end;
									justify-content: space-between;
									box-shadow: 0rpx 20rpx 40rpx 0rpx rgba(64, 75, 99, 0.03);

								}
							}

							.uni-swiper-dots {
								right: -180rpx;
								transform: inherit;
								bottom: inherit;
								margin-top: -30px;
								z-index: 999;
								position: absolute;
							}
						}

						.best-title {
							color: #3B3B3B;
							font-size: 32rpx;
							margin: 56rpx 0;
							display: block;
						}


						.box {
							.left {
								uni-text {
									display: block;


									&:nth-child(1) {
										font-size: 36rpx;
										color: #02010E;
										white-space: nowrap;
										overflow: hidden; //文本超出隐藏
										text-overflow: ellipsis; //文本超出省略号替代
										width: 380rpx;

									}

									&:nth-child(2) {
										display: block;
										font-size: 30rpx;
										color: #6A6A6A;
										padding: 5rpx 0;
										white-space: nowrap;
										overflow: hidden; //文本超出隐藏
										text-overflow: ellipsis; //文本超出省略号替代
										width: 486rpx;
									}

									&:nth-child(3) {
										font-size: 36rpx;
										color: #02010E;
									}
								}

								.desc {
									white-space: nowrap;
									overflow: hidden; //文本超出隐藏
									text-overflow: ellipsis; //文本超出省略号替代
									width: 350rpx;
								}
							}

							.right {
								uni-text {
									display: block;
									width: 60rpx;
									height: 60rpx;
									background: #1B1D29;
									border-radius: 14rpx;
									display: flex;
									justify-content: center;
									align-items: center;
								}
							}
						}


					}

					.tabs {
						flex: 1;
						display: flex;
						flex-direction: column;
						overflow-y: scroll;
						margin-bottom: 20rpx;
					}

					.works {
						// display: flex;
						display: grid;
						grid-template-columns: repeat(3, 1fr);

						.item {
							margin-bottom: 10rpx;

							&:nth-child(3n+1),
							&:first-child {
								justify-self: start;
							}

							&:nth-child(3n-1) {
								justify-self: center;
							}

							&:nth-child(3n) {
								justify-self: end;
							}

						}
					}
				}

				/deep/ .u-avatar__level {
					.u-icon__img {
						width: 34px !important;
					}
				}
			}
		}

		.empty {
			top: 18%;
			width: 100%;

			uni-image {
				width: 100%;
			}

			uni-text {
				display: block;
				text-align: center;
				color: #666666;
				font-size: 26rpx;
			}

			uni-button {
				left: 0;
				margin-top: 40rpx;
				width: 100%;
				height: 120rpx;
				background: #2934D0;
				border-radius: 20rpx;
				transform: translateX(-50%);
				left: 50%;
			}
		}

		.video-box {
			display: flex;
			flex-wrap: wrap;

			>view {
				margin-bottom: 18rpx;

				&:not(:first-child):not(:nth-child(3n+1)) {
					margin-left: 10rpx;
				}
			}
		}

	}

	/deep/ .container-box {
		padding: 0;
	}

	/deep/ .u-btn {
		width: 90px;
		height: 32px;
		mix-blend-mode: normal;
		border-radius: 10px;
		background: rgba(41, 52, 208, 1);
		margin: 20rpx auto;
	}
</style>